<template>
  <div class="mv">
    <div class="lastest">
      <Title title="最新MV" @handleClick='handleClick'></Title>
      <MvItem :lists="lists" :mv="true"> </MvItem>
    </div>
    <div class="official">
      <Title title="网易出品"></Title>
      <MvItem :lists="offcialLists" :mv="true"> </MvItem>
    </div>
    <div class="top">
      <Title title="热播MV"></Title>
      <MvItem :lists="hotLists" :mv="true"> </MvItem>
    </div>
  </div>
</template>

<script>
import Title from "@/components/content/Title";
import MvItem from "@/components/content/common/MvItem";
import axios from "@/utils/axios";
export default {
  data() {
    return {
      lists: [],
      hotLists: [],
      offcialLists: []
    };
  },
  components: {
    Title,
    MvItem,
  },
  methods: {
    handleClick(title) {
      if (title === '最新MV') {
        console.log('跳转到全部mv');
      }
    }
  },
  created() {
    this.$bus.$emit("changeMenu", [
      { word: "MV", name: "moveMv" },
    ]);
    axios.get("/mv/first", { params: { limit: 6 } }).then((res) => {
      this.lists = res.data;
    });
    axios.get("/top/mv", { params: { limit: 30 } }).then((res) => {
        this.hotLists = res.data;
    });
    axios.get("/mv/exclusive/rcmd", { params: { limit: 6 } }).then((res) => {
        this.offcialLists = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
</style>